<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-key的作用</title>
</head>
<body>

<div id="root"></div>

<!--引入React核心库-->
<script type="text/javascript" src="../0-ReactJs-v17.0.2/react.development.js"></script>
<!--引入React-Dom，用于支持React操作Dom-->
<script type="text/javascript" src="../0-ReactJs-v17.0.2/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script type="text/javascript" src="../0-ReactJs-v17.0.2/babel.min.js"></script>

<script type="text/babel">

    /*
        经典面试题：
            1-React/Vue中key有什么作用？（key的内部原理是什么？）
            2-为什么遍历列表，key最好不要用index？

            1、虚拟DOM中key的作用：
                1-简单的说：key是虚拟DOM对象的标识，在更新显示时key起着及其重要的作用。
                2-详细的说：当状态中的数据发生变化时，React会根据【新数据】生成【新的虚拟DOM】，
                          随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：

                          a．旧康拟DOM中找到了与新處拟DON相同的key：
                                1）若虚拟DOM中内容没交，直按使用之前的真实DOM
                                2）若服拟DOM中内容交了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

                          b．旧日虚拟DOM中未找到与新虛拟DOM相同的key
                                根据数据创建新的真实DOM，随后演染到到页面

            2、用index作为key可能会引发的问题：
                1-若对数据进行：逆序添加、逆序删除等破坏顺序操作：
                    会产生没有必要的真实DOM更新 二=》 界面效果没问题，但效率低。
                2-如果结构中还包含術入类的DOM:
                    会产生错识DOM更新 ==〉界面有问题。
                3-注意！如果不存在对数据的逆序添加、逆序朋除等破坏顺广操作，仅用于演染列表用于展示，使用index作为key是没有问题的。

            3． 开发中如何选择key？
                1-最好使用每条数据的啡一标识作为key，比如id、手机号、身份证号、学号等啡一值。
                2-如果确定只是简单的展示数据，用index也是可以的。
     */

    /*
        慢动作回放----使用index素引值做为key
            初始数据：
                {id:1,name:'小张',age:18},
                {id:2,name:'小李',age:19}
            初始的虚拟DOM:
                <1i key='0'>小张---18<input type="text" /></1i>
                <1i key='1'>小李---19<input type="text" /></1i>
            更新后的数据：
                {id:3,name:'小王',age:20},
                {id:1,name:'小张',age:18),
                {id:2,name:'小李',age:19}
            更新数据后的虚拟DOM:
                <1i key='0'>小王---20<input type="text" /></1i>
                <1i key='1'>小张---18<input type="text" /></1i>
                <1i key='2'>小李---19<input type="text" /></1i>


  ----------------------------------------------------------------

            慢动作回放----使用index素引值做为key
            初始数据：
                {id:1,name:'小张',age:18},
                {id:2,name:'小李',age:19}
            初始的虚拟DOM:
                <1i key='0'>小张---18<input type="text" /></1i>
                <1i key='1'>小李---19<input type="text" /></1i>
            更新后的数据：
                {id:3,name:'小王',age:20},
                {id:1,name:'小张',age:18),
                {id:2,name:'小李',age:19}
            更新数据后的虚拟DOM:
                <1i key='3'>小王---20<input type="text" /></1i>
                <1i key='0'>小张---18<input type="text" /></1i>
                <1i key='1'>小李---19<input type="text" /></1i>

     */

    class Person extends React.Component {

        state = {
            persons: [
                {
                    id: 1, name: '小张', age: 18
                },
                {
                    id: 2, name: '小李', age: 19
                }]
        }

        addPerson = () => {
            this.setState({
                persons: [
                    {
                        id: 3, name: '小王', age: 20
                    },
                    ...this.state.persons
                ]
            })
        }


        render() {
            const {persons} = this.state
            return (
                <div>
                    <ul>
                        {persons.map((item, index) => {
                            return <li key={index}>{item.name}---{item.age}<input type="text"/></li>
                        })}
                    </ul>
                    <hr/>
                    <ul>
                        {persons.map((item) => {
                            return <li key={item.id}>{item.name}---{item.age}<input type="text"/></li>
                        })}
                    </ul>
                    <button onClick={this.addPerson}>添加人员</button>
                </div>

            )
        }
    }

    ReactDOM.render(<Person/>, document.getElementById('root'))
</script>

</body>
</html>